<template>
	<div class="user_container">
		<div class="user_wrapper">
			<!--                                搜索框-->
			<div class="user_input_container">
				<el-input placeholder="请输入内容" v-model="searchVal">
					<el-button slot="append" icon="el-icon-search" @click="onSearch"></el-button>
				</el-input>
			</div>
			<div class="user_button_container">
				<el-button type="primary" @click="dialogFormVisible=true">添加用户</el-button>
			</div>
		</div>

		<!--                    表格-->
		<div>
			<el-table :data="showlist" border style="width: 100%">
				<el-table-column prop="number" label="#" width="50px">
				</el-table-column>
				<el-table-column prop="name" label="姓名" width="100px">
				</el-table-column>
				<el-table-column prop="email" label="邮箱">
				</el-table-column>
				<el-table-column prop="tel" label="电话号码">
				</el-table-column>
				<el-table-column prop="role" label="角色" width="120px">
				</el-table-column>
				<el-table-column label="状态">
					<!--                                        状态按钮-->
					<template slot-scope="prop">
						<el-switch v-model="prop.row.status" @change="onStatusChange"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="200px">
					<!--              -操作按钮   修改，删除-->
					<template slot-scope="prop">
						<el-button type="primary" icon="el-icon-edit" circle @click="onClickRevise(prop.row)"></el-button>
						<el-button type="danger" icon="el-icon-delete" circle @click="onClickDel(prop.$index)"></el-button>
						<el-button type="warning" icon="el-icon-star-off" circle></el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!--     分页器-->
		<div>
			<el-pagination background layout="prev, pager, next" :total="userlist.length" :page-size="2" @current-change="onCurrentChange">
			</el-pagination>
		</div>

		<!--添加信息，对话框-->
		<div>
			<el-dialog title="添加信息" :visible.sync="dialogFormVisible">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label="用户名" prop="name">
						<el-input v-model="ruleForm.name"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="pass">
						<el-input v-model="ruleForm.pass"></el-input>
					</el-form-item>
					<el-form-item label="邮箱" prop="email">
						<el-input v-model="ruleForm.email"></el-input>
					</el-form-item>
					<el-form-item label="手机号码" prop="tel">
						<el-input v-model="ruleForm.tel"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="onclickAdd">确 定</el-button>
				</div>
			</el-dialog>
		</div>

		<!-- 修改  对话框-->
		<div>
			<el-dialog title="修改信息" :visible.sync="dialogFormMid">
				<el-form :model="userMid" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label="用户名" prop="name">
						<el-input v-model="userMid.name" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="邮箱" prop="email">
						<el-input v-model="userMid.email"></el-input>
					</el-form-item>
					<el-form-item label="手机号码" prop="tel">
						<el-input v-model="userMid.tel"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormMid = false">取 消</el-button>
					<el-button type="primary" @click="onclickMid">确 定</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				userlist: JSON.parse(localStorage.getItem('users')) || [],
				dialogFormVisible: false,
				dialogFormMid: false,
				showlist: [],
				start: 0,
				end: 2,
				searchVal: '',
				userMid: {},
				status: 0,
				statusVal: true,
				ruleForm: {
					name: '',
					pass: '',
					email: '',
					tel: '',
				},
				rules: {
					name: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					pass: [{
						required: true,
						min: 6,
						max: 18,
						message: '长度在 6 到 18 个字符',
						trigger: 'blur'
					}],
					email: [{
						required: true,
						validator: this.validatorEmail,
						trigger: 'blur'
					}],
					tel: [{
						required: true,
						min: 11,
						max: 11,
						message: '手机号长度11位',
						trigger: 'blur'
					}],
				},
			}
		},
		methods: {
			//验证邮箱正则
			validatorEmail(rule, value, callback) {
				var reg = /\w+((-w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+/;
				if (reg.test(value)) {
					callback()
				} else {
					return callback(new Error('邮箱验证错误'));
				}
			},

			//添加功能
			onclickAdd() {
				// console.log('1111')
				this.dialogFormVisible = false //隐藏对话框

				var index = localStorage.getItem('index') //获取到本地下标
				if (!index) { //如果下标不存在
					index = 1 //让下标等于1
				} else {
					index++ //如果存在，每添加一条就让下标+1
				}
				localStorage.setItem('index', index)

				//开始组装添加信息
				//1，先去重操作
				var flag = false
				this.userlist.map(el => {
					if (el.name == this.ruleForm.name || el.tel == this.ruleForm.tel || el.email == this.ruleForm.email) {
						flag = true
					}
				})

				//2，没有重复的内容， 定义添加内容
				if (!flag) {
					var temp = {
						number: index,
						name: this.ruleForm.name,
						email: this.ruleForm.email,
						tel: this.ruleForm.tel,
						role: "普通用户",
						status: false
					}

					//3，成功添加到数组
					this.userlist.push(temp)
					localStorage.setItem('users', JSON.stringify(this.userlist))
				}
			},

			//分页功能
			onCurrentChange(page) { //page ,自带参数    页码
				console.log(page)
				this.start = (page - 1) * 2; //每次开头起始位置
				this.end = page * 2; //每次结束位置
				//判断一下，如果最后一页跳过的条数，大于数组总长度，那么就让它等于总长度
				if (this.end > this.userlist.length) {
					this.end = this.userlist.length;
				}

				//每次刷新下一页，先清空上一页内容，然后显示新页面的
				this.showlist = []

				//每次刷新过之后显示的数据
				for (let index = this.start; index < this.end; index++) {
					this.showlist.push(this.userlist[index])
				}

			},

			//状态按钮功能
			onStatusChange() {
				this.statusVal = false
				localStorage.setItem('users', JSON.stringify(this.userlist))
			},

			//操作删除按钮
			onClickDel(index) {
				//1，获取要删除的分页数组数据
				var temp = this.showlist.splice(index, 1);
				//2，遍历原数组
				this.userlist.forEach((item, index) => {
					//3，如果原数组的名字，等于当前要删除的数据的名字
					if (item.name === temp[0].name) {
						//4，然后就删除原数组的数据
						this.userlist.splice(index, 1)
						localStorage.setItem('users', JSON.stringify(this.userlist))
					}
				})
			},

			//搜索功能
			onSearch() {
				if (this.searchVal == '') {
					this.$message('搜索内容不能为空')
					return
				}
				//循环，查找搜索框输入内容和数组数据比配相同数据
				this.showlist.map(el => {
					if (el.name.includes(this.searchVal)) {
						//每次显示之前清空数组
						this.showlist = []
						this.showlist.push(el);
					}
				})
				console.log(this.showlist)
			},

			//修改
			onClickRevise(item) {
				this.dialogFormMid = true
				this.userMid = item;
			},

			//修改确定
			onclickMid() {
				this.dialogFormMid = false
				localStorage.setItem('users', JSON.stringify(this.userlist))
			},

		},
		mounted() {
			//分页器初始显示数据
			for (let index = this.start; index < this.end; index++) {
				this.showlist.push(this.userlist[index])
			}

		}
	}
</script>

<style scoped>
	.user_container {
		width: 100%;
		height: 85vh;
		background-color: #fff;
		/*display: inline-flex;*/
		/*justify-content: center;*/
		/*align-items: center;*/
	}

	.user_wrapper {
		width: 100%;
		height: 60px;
		display: inline-flex;
		justify-content: flex-start;
		align-items: center;
	}

	.user_input_container {
		margin: 10px;
	}
</style>
